<html>
<head>
<style type="text/css">
<!--
#main
{
	position:absolute;
	width:50%;
	height:70%;
	left:25%;
	top:15%;
	overflow:auto;
	border:1px solid black;
}
#left, #right
{
	position:absolute;
	width:10%;
	height:80%;
	top:10%;
	border:1px solid red;
}
#left
{
	left:10%;
}
#right
{
	left:80%;
}

#ileft, #iright
{
	position:absolute;
	width:5%;
	height:70%;
	top:15%;
	border:1px solid green;
}
#ileft
{
	left:20%;
}
#iright
{
	left:75%;
}



#top, #bottom
{
	position:absolute;
	width:80%;
	height:5%;
	left:10%;
	border:1px solid blue;
}
#top
{
	top:5%;
}
#bottom
{
	top:90%;
}

#itop, #ibottom
{
	position:absolute;
	width:50%;
	height:5%;
	left:25%;
	border:1px solid black;
}
#itop
{
	top:10%;
}
#ibottom
{
	top:85%;
}

#etopl, #etopr
{
	position:absolute;
	width:5%;
	height:5%;
         left:20%;
	border:1px solid pink;
}
#etopl
{
	top:10%;

}
#etopr
{
	top:85%;
}

#ebottoml, #ebottomr
{
	position:absolute;
	width:5%;
	height:5%;
         left:75%;
	border:1px solid pink;
}
#ebottoml
{
	top:10%;
}
#ebottomr
{
	top:85%;
}
-->
</style>



</head>

<body>

<div id = "top" class = "border">
top
</div>

<div id = "itop" class = "border">
itop
</div>

<div id = "etopl" class = "border">
etopl
</div>
<div id = "etopr" class = "border">
etopr
</div>

<div id = "left" class = "border">
left
</div>


<div id = "ileft" class = "border">
ileft
</div>

<div id = "main" class = "insert">
main
</div>

<div id = "right" class = "border">
right
</div>

<div id = "iright" class = "border">
iright
</div>

<div id = "bottom" class = "border">
bottom
</div>

<div id = "ibottom" class = "border">
ibottom
</div>
<div id = "ebottoml" class = "border">
ebottoml
</div>
<div id = "ebottomr" class = "border">
ebottomr
</div>

</body>

</html>